<script setup lang="ts">
import { reactive, ref, watch } from 'vue'
import { useGetOrderRecordApi } from "@/apis/order"
import { onPullDownRefresh, onReachBottom, onShow } from '@dcloudio/uni-app'
import { orderStauts } from "@/utils/format"

const taskStatusList = [
	{
		name: "全部",
		type: undefined
	},
	{
        name: '已结束',
		type: 2
    }
]
onShow(()=> {
	getOrderData()
})

//  下拉刷新
onPullDownRefresh(()=>{
	setTimeout(function () {
		queryForm.page = 1
		getOrderData()
		uni.stopPullDownRefresh();
	}, 500);
})
let total = 0
//  触底加载
onReachBottom(()=>{
	if(total < queryForm.page * queryForm.limit) return
	queryForm.page++
	getOrderData()
})


const queryForm = reactive({
	page: 1,
	limit: 10,
	state: undefined
})

watch(queryForm,()=>{
		getOrderData()
})

function getOrderData(){
	useGetOrderRecordApi(queryForm).then(res =>{
		total = res.total
		orderData.value = res.list
	})
}

const orderData = ref<any[]>([])

function tabClick(val){
	queryForm.state = val.type
	getOrderData()
}

function openOrderInfo(id: string){
	uni.navigateTo({
		url: "/pages/order/orderInfo?id=" + id 
	})
}
</script>

<template>
	<view class="">
		<u-sticky>
			<u-tabs :list="taskStatusList" lineWidth="40" itemStyle="flex: 1; height: 40px" @click="tabClick"/>
		</u-sticky>
		<scroll-view scroll-y show-scrollbar class="scroll-y">
			<view v-for="item in orderData" :key="item.id" class="order_item" @click="openOrderInfo(item.id)">
				<view class="item"><text>订单名&nbsp;&nbsp;{{item.name}}</text>
				<u-tag plain :text=" item.state== 1 ? '进行中' : '已结束'" 
					:type="item.state== 1 ? 'success' : 'error'" shape="circle" />
				</view>
				<view class="item"><text>起点&nbsp;&nbsp;{{item.loadingAddress}}</text></view>
				<view class="item"><text>终点&nbsp;&nbsp;{{item.unloadingAddress}}</text></view>
				<view class="item"><text>创建时间&nbsp;&nbsp;{{item.createTime}}</text></view>
			</view>
		</scroll-view>
	</view>
</template>

<style>
page{
	background: linear-gradient(to bottom, #edd9fd 10% ,#d8c6e6 20%, #F8F8F8 100%);
}
.scroll-y{
	padding: 0 20rpx 10rpx 20rpx;
}
.order_item{
	position: relative;
	background-color: #fff;
	margin: 10px 0;
	padding: 5px 10px;
	border-radius: 5px;
	font-size: 24rpx;
}
.item{
	display: flex;
}
.item>text{
	flex: 1;
}
.maxWidth{
	max-width: 70%;
}
</style>
